<template>
  <div>
    <div class="clearfix padding h-top-title">
      <div class="float-l"><span class="bar-l"></span>未来一周休假情况</div>
      <div class="float-r">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
              <i class="el-icon-more gray"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="edit">更多</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="h-vacation">
      <div v-if="!showList.length == 0">
        <div  class="clearfix h-vacation-item infomation-row" v-for="item in showList" :key="item.id">
          <div class="h-vacation-duration" :title="item.vacationStartDate + '至' + item.vacationEndDate"><img  src="../../../../assets/beneform4j/home/home_icon_time.png" alt="">{{item.vacationStartDate.split(' ')[0]}} 至 {{item.vacationEndDate.split(' ')[0]}}</div>
          <div class="h-vacation-time" >{{item.vacationDays}}天</div>
          <div class="h-vacation-name" :title="item.employeeName">{{item.employeeName}}</div>
          <div class="h-vacation-apply" :title="item.insertDate">{{item.insertDate}}</div>
        </div>
      </div>
      <div v-if="showList.length  == 0" class="no-vacation">
        <img src="../../../../assets/beneform4j/404/icon_not_relax.png" alt="">
      </div>

      <bf-table-edit :width="700" ref="showVacation" :title="'休假详情'" @formSubmit="formSubmit">
        <div>
          <bf-table :setting="setting" :data="vacationList" :hiddenPagination = "true"></bf-table>
        </div>
      </bf-table-edit>
    </div>
  </div>
</template>

<script>
import { getVacationListApi } from './api'
export default {
  data() {
    return {
      showList: [],
      vacationList: [],
      setting: [
        {
          field: 'employeeName',
          title: '休假人'
        },
        {
          field: 'vacationTypeName',
          title: '休假类型'
        },
        {
          field: 'vacationStartDate',
          title: '休假开始时间'
        },
        {
          field: 'vacationEndDate',
          title: '休假结束时间'
        },
        {
          field: 'vacationDays',
          title: '休假天数'
        }
      ]
    }
  },
  mounted() {
    this.getVacationList()
  },
  methods: {
    formSubmit() {
      this.$refs.showVacation.hidden()
    },
    handleCommand(item) {
      if (item === 'edit') {
        this.showVacation()
      }
    },
    showVacation() {
      this.$refs.showVacation.show({})
    },
    getVacationList() {
      getVacationListApi().then(response => {
        if (response.data) {
          this.vacationList = response.data
          this.showList = response.data.slice().slice(0, 5)
        }
      })
    }
  }
}
</script>

<style scoped>
@import url('../home.css');
.no-vacation{
  text-align: center;
  margin-top: 50px;
}
</style>

